<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getShengApi, getShiApi, getClassApi, changeUserInfoApi } from '/api/request';
import { uploadFile } from '../../utils';
const props = defineProps({});
const user = ref({});
user.value = uni.getStorageSync('USER_TOKEN_INFOS');
console.log(user.value);
const changeUserImg = () => {
    uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: async (res) => {
            const tempFilePaths = res.tempFilePaths;
            try {
                let callbackStatus = await uploadFile(tempFilePaths[0]);
                user.value.avatar = callbackStatus;
            } catch (e) {
                uni.showToast({
                    title: e,
                    icon: 'none'
                });
                console.log(e);
            }
        },
        fail: (err) => {
            console.error('选择图片失败', err);
        }
    });
};
const getSheng = async () => {
    let res = await getShengApi();
    sheng.value = res.data.map((item) => {
        return {
            text: item.name,
            value: item.id
        };
    });
};
const getClass = async () => {
    let res = await getClassApi();
    classList.value = res.data.map((item) => {
        return {
            text: item.name,
            value: item.id
        };
    });
};
const getShi = async (id) => {
    console.log(id);
    uni.showLoading({});
    let res = await getShiApi({
        pid: id
    });
    shi.value = res.data.map((item) => {
        return {
            text: item.name,
            value: item.id
        };
    });
    console.log(shi.value);
    uni.hideLoading();
};
getSheng();
getClass();
if (user.value?.province_id) {
    getShi(user.value.province_id);
}
let platform = uni.getStorageSync('platform');
const goback = () => {
    uni.navigateBack();
};

const sheng = ref([]);
const shi = ref([]);
const classList = ref([]);

const classes = ref(0);
const onnodeclick = (e) => {
    getShi(e.value);
};
//打开
const onpopupopened = (e) => {
    console.log('popupopened');
};
const onpopupclosed = (e) => {
    console.log('popupclosed');
};
const onchange = (e) => {
    console.log('onchange:', e);
};
const submit = async () => {
    if (!user.value.province_id) {
        uni.showToast({
            title: '省份不可为空',
            icon: 'none'
        });
        return;
    }
    if (!user.value.city_id) {
        uni.showToast({
            title: '城市不可为空',
            icon: 'none'
        });
        return;
    }
    if (!user.value.grade_id) {
        uni.showToast({
            title: '年级不可为空',
            icon: 'none'
        });
        return;
    }
    let res = await changeUserInfoApi(user.value);
    uni.showToast({
        title: res.msg,
        icon: 'none'
    });
    if (res.code == 1) {
        uni.setStorageSync('USER_TOKEN_INFOS', user.value);
    }
};
</script>

<template>
    <view class="wrap">
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 基本资料 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <scroll-view
            class="body"
            scroll-y="true"
            v-if="user && user.id"
            :style="{
                height: platform.gaodu - platform.dingbu - 96 - 128 + 'rpx'
            }"
        >
            <view class="userinfo"> 个人信息 </view>
            <view class="item">
                <view class="name"> 姓名 </view>
                <input type="text" v-model="user.nickname" />
            </view>
            <view class="item">
                <view class="name"> 手机号 </view>
                <input
                    type="text"
                    v-model="user.mobile"
                    disabled="true"
                    style="background-color: #f7f7f7"
                />
            </view>
            <view class="item">
                <view class="name"> 省 </view>
                <uni-data-picker
                    :step-searh="true"
                    placeholder="请选择省"
                    popup-title="请选择所在地区"
                    :localdata="sheng"
                    v-model="user.province_id"
                    @nodeclick="onnodeclick"
                >
                </uni-data-picker>
            </view>
            <view class="item">
                <view class="name"> 市 </view>
                <uni-data-picker
                    v-if="shi.length"
                    :step-searh="true"
                    placeholder="请选择市"
                    popup-title="请选择所在地区"
                    :localdata="shi"
                    v-model="user.city_id"
                >
                </uni-data-picker>
            </view>
            <view class="item">
                <view class="name"> 年级 </view>
                <uni-data-picker
                    :step-searh="true"
                    placeholder="请选择年级"
                    popup-title="请选择年级"
                    :localdata="classList"
                    v-model="user.grade_id"
                >
                </uni-data-picker>
            </view>
            <view class="item">
                <view class="name"> 编码 </view>
                <input
                    type="text"
                    v-model="user.score"
                    disabled="true"
                    style="background-color: #f7f7f7"
                />
            </view>
            <view class="btn uni-row" @click="submit"> 提交修改 </view>
            <view class="" style="height: 20rpx"> </view>
        </scroll-view>
    </view>

    <image
        @click="changeUserImg"
        :style="{
            top: platform.dingbu + 96 + 28 + 'rpx'
        }"
        class="user-img"
        :src="'http://zhangyu.aizhangyu.cn' + user?.avatar"
    ></image>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        margin-top: 128rpx;
        padding-top: 158rpx;
        padding-left: 28rpx;
        padding-right: 28rpx;
        background: #ffffff;
        border-radius: 32rpx 32rpx 0rpx 0rpx;

        .userinfo {
            height: 88rpx;
            line-height: 88rpx;
            font-size: 32rpx;
            color: #333333;
        }

        .item {
            .name {
                font-size: 28rpx;
                color: #b3b3b3;
                padding: 24rpx 0 16rpx;
            }

            input {
                height: 72rpx;
                padding-left: 24rpx;
                font-size: 24rpx;
                color: #333333;
                border-radius: 16rpx;
                border: 2rpx solid #e6e6e6;
                background-color: inherit;
            }
        }

        .btn {
            margin-top: 46rpx;
            justify-content: center;
            font-size: 32rpx;
            color: #ffffff;
            height: 88rpx;
            background: #9561f3;
            border-radius: 16rpx;
        }
    }
}

.user-img {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 4;
    width: 224rpx;
    height: 224rpx;
    border-radius: 50%;
}
</style>
